<template>
	<div class="container">
		<view class="main">
			<h2 style="margin-top:78rpx">免费注册</h2>
			<u-form :model="form" ref="uForm">
				<u-form-item label="中国+86" prop="mobile">
					<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" border="none" maxlength="11"
						clearable />
				</u-form-item>

				<u-form-item>
					<u-input v-model="form.nick" type="text" border="none" maxlength="11" clearable />
					<img src="../../static/images/shaizi.svg" alt="" style="width: 40rpx;height: 40rpx;" @click="switchname">
				</u-form-item>
				<u-form-item>
					<u-input v-model="form.code" type="number" border="none" maxlength="11" clearable placeholder="请输入4位验证码" />
					<span>获取验证码</span>
				</u-form-item>

				<u-form-item prop="pwd">
					<u-input v-model="form.pwd" :type="type" border="none" clearable placeholder="请输入8-25位(数字+字母)密码" />

				</u-form-item>
				<u-form-item >
					<u-input v-model="pwdagain" :type="type" border="none" :password-icon="passwordIcon" clearable placeholder="请再次输入密码" />

				</u-form-item>
				<u-button type="success" :custom-style="submitbutt" @click="zhuce">确定</u-button>
			</u-form>
		</view>
		<view class="footer">

			<view id="leftcheckbox" @click="switchflag" :class="{activebox:flag===true}">
				<u-icon name="checkbox-mark" size="17px" v-if="flag==true" color="white"></u-icon>
			</view>
			<view class="rightprops">
				<p style="color: #969799;font-size:24rpx;margin-left:8rpx;"> 阅读并同意 <span style="color: #3388ff;">《用户协议》</span>和 <span style="color: #3388ff;">《隐私政策》</span></p>
			</view>

		</view>
	</div>
</template>

<script>
	export default {
		name: "zhuce",
		data() {
			return {
				flag: true,
				type: 'password',
				passwordIcon: true,
				form: {
					mobile: "",
					nick: "",
					code: "",
					pwd: "",
					autoLogin: true,
					token: ""
				},
				pwdagain:"",
				submitbutt: {
					marginTop: '60rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					fontSize: "4.27vw",
					height: "88rpx",
					backgroundColor: "#1ba784",
					opacity: "0.5",
					border: "none"
				},
				arr:["影流之主","众星之子","弗雷尔卓德之心","蛮族之王","牛头酋长","无双剑姬","虚空行者","疾风剑豪","解脱者","赏金小姐"]
			}
		},
		watch: {
			form: {
				handler(n) {
					if (n.mobile && n.pwd ) {
						this.submitbutt.opacity = "1"
					} else this.submitbutt.opacity = ".5"
				},
				deep: true,
				immediate: true
		
			}
		},
		onReady() {
			this.proname()
		},
		methods: {
			switchflag() {
				console.log(this.flag)
				this.flag == true ? this.flag = false : this.flag = true
			},
			proname(){
				let random = Math.floor(Math.random()*10)
				this.form.nick=this.arr[random]
			},
			switchname(){
				this.proname()
			},
			zhuce(){
				console.log(1)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 60rpx;
	}

	.main {
		height: 1150rpx;

		::v-deep .u-form-item__body {
			border-bottom: 1px solid #ebedf0;
			padding: 5.33vw 0 2.67vw;
		}

		::v-deep .u-input {
			padding: 0 !important
		}

		::v-deep .u-form-item__body__left {
			width: 130rpx !important;
			margin-right: 10rpx;

			::after {
				display: block;
				content: " ";
				width: 1px;
				height: 3.73vw;
				background: #ebedf0;
				position: absolute;
				top: 50%;
				margin-top: -1.87vw;
				right: 0;
			}
		}
	}
	::v-deep .u-icon__icon{
		font-size: 15px !important;
	}
	.footer {
		display: flex;
		justify-content: center;
		margin-bottom: 60rpx;

		#leftcheckbox {
			border-radius: 100%;
			border: 2rpx solid;
			border: 1px solid #c8c9cc;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.activebox {
		background-color: #1ba784 !important;
	}
</style>